import React, { useMemo } from "react";

import ChildCountView from "../ChildCount";
import MyContext from "./Context";

const ChildCount = () => {
  const { store, dispatch } = React.useContext(MyContext);

  return useMemo(() => {
    console.log("Demo2: re-render ChildCount", store.count);
    return (
      <div className="Child-container">
        <div>count is: {store.count}</div>
        <button onClick={() => dispatch({ type: "addCount" })}>AddCount</button>
      </div>
    );
    // return <ChildCountView count={store.count} dispatch={dispatch} />;
  }, [store.count, dispatch]);
};

export default ChildCount;
